// 这是一个 SignalR 客户端连接示例
// 用于前端开发人员参考如何连接和使用 SignalR API

// 安装依赖: npm install @microsoft/signalr

import * as signalR from "@microsoft/signalr";

export class DashboardSignalRClient {
  constructor(url) {
    // SignalR Hub 的 URL
    this.hubUrl = url || "https://localhost:5001/dashboardHub";
    this.connection = null;
    this.isConnected = false;
    
    // 数据存储
    this.dashboardData = {
      currentTime: '',
      planConfig: null,
      deviceConfig: null,
      productionConfig: null,
      productionStations: [],
      qualityConfig: null,
      alarmList: [],
      trendData: null
    };
    
    // 事件回调函数
    this.onDataUpdateCallbacks = [];
  }

  // 添加数据更新回调
  onDataUpdate(callback) {
    if (typeof callback === 'function') {
      this.onDataUpdateCallbacks.push(callback);
    }
  }

  // 触发数据更新回调
  triggerDataUpdate(key, data) {
    // 更新本地数据
    if (key && data !== undefined) {
      this.dashboardData[key] = data;
    }
    
    // 触发回调
    this.onDataUpdateCallbacks.forEach(callback => {
      callback(this.dashboardData);
    });
  }

  // 初始化连接
  async connect() {
    try {
      this.connection = new signalR.HubConnectionBuilder()
        .withUrl(this.hubUrl)
        .withAutomaticReconnect()
        .build();

      // 连接建立事件
      this.connection.on("ConnectionEstablished", (message) => {
        console.log("SignalR 连接成功:", message);
      });
      
      // 接收初始数据
      this.connection.on("ReceiveInitialData", (data) => {
        // 接收所有初始数据
        Object.keys(data).forEach(key => {
          const camelKey = key.charAt(0).toLowerCase() + key.slice(1);
          this.dashboardData[camelKey] = data[key];
        });
        
        // 触发数据更新
        this.triggerDataUpdate();
      });
      
      // 接收当前时间
      this.connection.on("ReceiveCurrentTime", (time) => {
        this.triggerDataUpdate('currentTime', time);
      });
      
      // 接收生产计划数据
      this.connection.on("ReceivePlanData", (data) => {
        this.triggerDataUpdate('planConfig', data);
      });
      
      // 接收设备运行状态数据
      this.connection.on("ReceiveDeviceData", (data) => {
        this.triggerDataUpdate('deviceConfig', data);
      });
      
      // 接收生产概况数据
      this.connection.on("ReceiveProductionConfig", (data) => {
        this.triggerDataUpdate('productionConfig', data);
      });
      
      // 接收生产线状态
      this.connection.on("ReceiveProductionStations", (data) => {
        this.triggerDataUpdate('productionStations', data);
      });
      
      // 接收品质监控数据
      this.connection.on("ReceiveQualityData", (data) => {
        this.triggerDataUpdate('qualityConfig', data);
      });
      
      // 接收告警信息
      this.connection.on("ReceiveAlarmList", (data) => {
        this.triggerDataUpdate('alarmList', data);
      });
      
      // 接收所有更新数据
      this.connection.on("ReceiveAllData", (data) => {
        Object.keys(data).forEach(key => {
          const camelKey = key.charAt(0).toLowerCase() + key.slice(1);
          this.dashboardData[camelKey] = data[key];
        });
        
        this.triggerDataUpdate();
      });

      // 启动连接
      await this.connection.start();
      console.log("SignalR 连接已建立");
      this.isConnected = true;
      
      // 请求初始数据
      await this.connection.invoke("GetInitialData");
      
    } catch (error) {
      console.error("建立 SignalR 连接时出错:", error);
      throw error;
    }
  }

  // 断开连接
  async disconnect() {
    if (this.connection) {
      try {
        await this.connection.stop();
        console.log("SignalR 连接已断开");
        this.isConnected = false;
      } catch (error) {
        console.error("断开 SignalR 连接时出错:", error);
      }
    }
  }

  // 手动请求更新所有数据
  async updateAllData() {
    if (this.isConnected) {
      await this.connection.invoke("UpdateAllData");
    } else {
      console.warn("SignalR 尚未连接");
    }
  }
}

/* 使用示例：

import { DashboardSignalRClient } from './path-to-this-file';

// 创建实例
const client = new DashboardSignalRClient('https://your-api-url/dashboardHub');

// 添加数据更新回调
client.onDataUpdate((data) => {
  console.log('仪表盘数据更新:', data);
  
  // 更新你的组件状态
  // 例如在Vue中:
  // this.currentTime = data.currentTime;
  // this.planConfig = data.planConfig;
  // 等等...
});

// 连接服务器
client.connect()
  .then(() => {
    console.log('连接成功!');
  })
  .catch(err => {
    console.error('连接失败:', err);
  });

// 在组件卸载时断开连接
// 例如在Vue组件的beforeUnmount钩子中:
// client.disconnect();

*/ 